
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        window.onload = function(){

            /*
             * 键盘事件：
             * 	onkeydown
             * 		- 按键被按下
             * 		- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
             * 		- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
             * 			这种设计是为了防止误操作的发生。
             * 	onkeyup
             * 		- 按键被松开
             *
             *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
             */

            document.onkeydown = function(event){
                event = event || window.event;

                /*
                 * 可以通过keyCode来获取按键的编码
                 * 	通过它可以判断哪个按键被按下
                 * 除了keyCode，事件对象中还提供了几个属性
                 * 	altKey
                 * 	ctrlKey
                 * 	shiftKey
                 * 		- 这个三个用来判断alt ctrl 和 shift是否被按下
                 * 			如果按下则返回true，否则返回false
                 */

                //console.log(event.keyCode);

                //判断一个y是否被按下
                //判断y和ctrl是否同时被按下
                if(event.keyCode === 89 && event.ctrlKey){
                    console.log("ctrl和y都被按下了");
                }


            };

            /*document.onkeyup = function(){
                console.log("按键松开了");
            };*/

            //获取input
            var input = document.getElementsByTagName("input")[0];

            input.onkeydown = function(event){

                event = event || window.event;

                //console.log(event.keyCode);
                //数字 48 - 57
                //使文本框中不能输入数字
                if(event.keyCode >= 48 && event.keyCode <= 57){
                    //在文本框中输入内容，属于onkeydown的默认行为
                    //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
                    return false;
                }


            };

            //使div可以根据不同的方向键向不同的方向移动
            /*
             * 按左键，div向左移
             * 按右键，div向右移
             * 。。。
             */


                //为document绑定一个按键按下的事件
                document.onkeydown = function(event){
                    event = event || window.event;

                    //定义一个变量，来表示移动的速度
                    var speed = 10;

                    //当用户按了ctrl以后，速度加快
                    if(event.ctrlKey){
                        speed = 500;
                    }

                    /*
                     * 37 左
                     * 38 上
                     * 39 右
                     * 40 下
                     */
                    switch(event.keyCode){
                        case 37:
                            //alert("向左"); left值减小
                            box1.style.left = box1.offsetLeft - speed + "px";
                            break;
                        case 39:
                            //alert("向右");
                            box1.style.left = box1.offsetLeft + speed + "px";
                            break;
                        case 38:
                            //alert("向上");
                            box1.style.top = box1.offsetTop - speed + "px";
                            break;
                        case 40:
                            //alert("向下");
                            box1.style.top = box1.offsetTop + speed + "px";
                            break;
                    }

                };




        };


    </script>
</head>
<body>

<input type="text" />

</body>
</html>